import classnames from "classnames";
import {observer} from 'mobx-react';
import React, { Component } from "react";
import {Tools} from 'weaver-mobile';
import moment from 'moment';
const getLabel = Tools.getLabel;

@observer
export default class SignInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currTime: moment().format("HH:mm:ss")
    };
  }

  componentDidMount() {
    this.monitor();
  }

  monitor = () => {
    this.timer != null && clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.setState({
        currTime: moment().format("HH:mm:ss")
      });
    }, 1000);
  };

  componentWillUnmount = () => {
    clearInterval(this.timer);
  }

  openOutSignLink = () => {
    if(window.em != null && window.em.checkJsApi('openLink')){
      window.em.openLink({
        url: `/spa/hrm/static4mobile/index.html#/outSign`,
        openType: 2,
        sysId: window.localStorage.emobile_ec_id
      });
    }else{
      window.location.href = '/spa/hrm/static4mobile/index.html#/outSign';
    }
  }

  checkOutsideSign = () => {
    const {store: {toJS, outButtonsInfo, switchStatus}} = this.props;
    const {status, outsidesign} = toJS(outButtonsInfo);
    const outside = (!status && outsidesign == '1');
    return switchStatus && outside;
  }

  render() {
    const { store, data, history } = this.props;
    const { outButtonsInfo: { isOutside, outsidesign, status }, nearly, currentPositionData, callOutSign, callSign, currTime } = store;
    const outside = this.checkOutsideSign();
    const signInfoClassName = classnames({
      signInfo: true
    });
    const statusClassName = classnames({
      signBtn: true,
      ["signBtn-outside"]: outside
    });
    let btnLbl = getLabel('500502','打卡');
    if (outside) btnLbl = getLabel('500503','外勤打卡');

    let nearlyInfo = getLabel('500504','距最近的 {param1} {param2}千米');
    if(nearly != null){
      nearlyInfo = nearlyInfo.replace('{param1}', getLabel('391196', '办公地点'));
      nearlyInfo = nearlyInfo.replace('{param2}', (nearly.positionObj.dis /1000).toFixed(1));
    }

    return (
      <div className={signInfoClassName}>
        <div className="positionInfo">
            <div className='location'>
                <div className='lbl'>{getLabel('126403','我的位置')}</div>
                {
                    nearly != null &&
                    <div className='info'>({nearlyInfo})</div>
                }
            </div>
            <div className='address'>
                {
                    currentPositionData.address != null && 
                    <div className='name text-elli'>{currentPositionData.address || ''}</div>
                }
            </div>
        </div>
        {
          outside ?
          <div className={statusClassName} onClick={this.openOutSignLink}>{`${this.props.store.currTime.format("HH:mm:ss")} ${btnLbl}`}</div>
          :
          <div className={statusClassName} onClick={() => callSign(data, null, () => this.props.history.go(-1))}>{`${this.props.store.currTime.format("HH:mm:ss")} ${btnLbl}`}</div>
        }
      </div>
    );
  }
}
